<template>
	<div class="component">
		<div class="inner">
			<div class="block">
				<div class="hot">
					<span><i class="iconfont icon-bofang1" />近期热门</span>
					<van-button size="mini" round @click="$emit('more-hot')">更多热歌</van-button>
				</div>
				<song-list :list='list' :listBtn='false' class="hot-list">
					<div slot="rank" class="rank" slot-scope="{ song }">
						<img v-lazy='song.picUrl'/>
					</div>
				</song-list>
			</div>
			<div class="block">
				<span class="title">简介</span>
				<span class="text">{{ artist && artist.briefDesc }}</span>
			</div>
			<div class="block" v-for="(item, index) of introduction" :key="index">
				<span class="title">{{ item.ti }}</span>
				<span class="text" v-html="getTxt(item.txt)"></span>
			</div>
		</div>
	</div>
</template>
<script>
import { desc, artists } from 'api/artist'
import Song from '@/entity/Song'
import SongList from 'base/song-list'

export default {
	components: {
		SongList
	},
	props: {
		id: [String, Number]
	},
	data() {
		return {
			list: [],
			artist: null,
			promise: null,
			introduction: null
		}
	},
	computed: {
		newHot() {
			return this.list[0]
		}
	},
	methods: {
		getArtists() {
			this.promise = artists(this.id).then(res => {
				this.artist = res.artist
				this.list = res.hotSongs.map(item => new Song(item)).splice(0, 3)
				return desc(this.id).then(res => this.introduction = res.introduction)
			})
		},
    getTxt(txt) {
      return  (txt + '').replace(/\n/g,"<br/>")
    }
	},
	watch: {
		id() {
			this.getArtists()
		}
	}
}
</script>
<style lang="less" scoped>
@import '~@/style/variable.less';

.component{
	width: 100%;
	min-height: 1px;
	.inner{
		padding: 0 10px;
		white-space: normal;
		.block{
			margin-bottom: 15px;
			>span{
				display: block;
			}
			.title{
				font-size: @font-size-normal;
				font-weight: bold;
				margin-bottom: 10px;
			}
			.text{
				line-height: 1.5;
			}
			.hot{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: bold;
				font-size: @font-size-small;
				i{
					margin-right: 10px;
					font-size: 1.2em;
				}
			}
			.hot-list{
				padding-top: 10px;
				.rank{
					height: 100%;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					img{
						height: 80%;
						width: 80%;
						border-radius: 10px;
					}
				}
			}
		}
	}
}
</style>